<template>
  <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
    <div class="searchBar">
      <el-input type="text" v-model="searchParam.goodName" style="width: 200px" />
      <span>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="init">重置</el-button>
      </span>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      height="450"
      :row-key="row => row.goodId"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="goodName" label="商品名" width="180" />
      <el-table-column prop="goodImg" scope="" label="商品图片" width="180">
        <template #default="scope">
          <img :src="scope.row.goodImg" alt="" style="width: 80px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column prop="count" label="剩余库存" width="180" />
    </el-table>
    <Pagination
      v-if="pageable.total > 0"
      :pageable="pageable"
      :handle-size-change="handleSizeChange"
      :handle-current-change="handleCurrentChange"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confrim">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ImportExcel">
import { ref } from "vue";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { getGoodList } from "@/api/modules/goods";
import { ElNotification } from "element-plus";

export interface ExcelParameterProps {
  title: string; // 标题
  getTableList?: () => void; // 获取表格数据的Api
  tableData?: [];
  goodsId?: [];
}

// dialog状态
const dialogVisible = ref(false);
// 父组件传过来的参数
const searchParam = ref({
  goodName: ""
});
const tableData: any = ref([]);
const pageable = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const selectArray: any = ref([]);
const parameter: any = ref<ExcelParameterProps>({
  title: "",
  goodsId: []
});
const handleSelectionChange = e => {
  selectArray.value = e.map(item => {
    console.log(item, "item");
    return {
      goodId: item.goodId || item.id,
      goodPrice: item.goodPrice,
      goodName: item.goodName,
      Sku: item.Sku
    };
  });
  console.log("handleSelectionChange", selectArray.value);
};
const handleCurrentChange = e => {
  pageable.value.pageNum = e;
  getTableList();
  console.log("handleCurrentChange", e);
};
const handleSizeChange = e => {
  console.log("handleSizeChange", e);
  pageable.value.pageSize = e;
  getTableList();
};
const init = () => {
  searchParam.value.goodName = "";
  search();
};
const search = () => {
  pageable.value.pageNum = 1;
  getTableList();
};
const tableRef: any = ref(null);
const getTableList = () => {
  let params: any = {
    pageSize: pageable.value.pageSize,
    pageNum: pageable.value.pageNum,
    ...searchParam.value
  };
  getGoodList(params).then(res => {
    if (res.code == 200) {
      let ids = parameter.value.goodId?.map(ite => ite.goodId);
      tableData.value = res.data.list.map(item => {
        item.goodId = item.id;
        return item;
      });
      console.log(ids, "ids", tableData.value);
      tableData.value.forEach(item => {
        if (ids.includes(item.goodId)) {
          console.log("item", item);
          tableRef.value.toggleRowSelection(item, true);
        }
      });
      pageable.value.total = res.data.total;
    }
  });
};
const emit = defineEmits<{
  updateGoods: [value: []];
}>();
const confrim = () => {
  if (selectArray.value.length == 0) return ElNotification("请选择商品");
  console.log(parameter.value.goodId, "parameter.value.goodsId", selectArray.value);
  if (parameter.value.goodsId?.length > 0) {
    let ids = parameter.value.goodsId?.map(ite => ite.goodId);
    selectArray.value.map(item => {
      ids?.includes(item.goodId) ? "" : parameter.value.goodsId.push(item);
    });
  } else {
    parameter.value.goodsId = selectArray.value;
  }
  console.log("confrim", parameter.value.goodsId);
  dialogVisible.value = false;
  emit("updateGoods", parameter.value.goodsId);
};
// 接收父组件参数
const acceptParams = (params: ExcelParameterProps) => {
  parameter.value = { ...parameter.value, ...params };
  dialogVisible.value = true;
  getTableList();
};
defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped>
.searchBar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
